<template>
    <view class="relationship-header">
        <!-- 返回箭头 -->
        <view class="nav-left" @click="handleBack">
            <han-icon name="return" size="36" />
        </view>

        <view class="relationship-list">
            <view
                class="list-item"
                v-for="item in relationshipList"
                :key="item.id"
                :class="{ active: item.id === activeId }"
                @click="handleTabClick(item.id)"
            >
                {{ item.name }}
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';

const emit = defineEmits(['tab-change']); // 给父组件传值

// 接收当前激活的标签
const props = defineProps({
    activeId: {
        type: Number,
        default: 1
    }
});

const activeId = ref(props.activeId); // 高亮 id
const relationshipList = ref([
    {
        id: 1,
        name: '互相关注'
    },
    {
        id: 2,
        name: '关注'
    },
    {
        id: 3,
        name: '粉丝'
    }
]);

// 监听props变化
watch(
    () => props.activeId,
    (newVal) => {
        activeId.value = newVal;
    }
);

// 处理点击标签实现高亮
const handleTabClick = (id) => {
    activeId.value = id;

    emit('tab-change', id); // 传值给父组件
};

// 退出页面
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style scoped lang="scss">
.relationship-header {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    height: $han-nav-bar-height;
    border-bottom: 1rpx solid $han-global-border-color;
    position: relative;

    .nav-left {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
    }

    .relationship-list {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        transition: transform 0.3s ease;

        .list-item {
            padding: 10rpx 0 5rpx;
            margin: 0 20rpx;
            font-size: $han-font-size-base;
            color: $han-global-secondary-font-color;
            transform: scale(0.98);
        }

        .active {
            color: $han-global-primary-font-color;
            font-weight: bold;
            border-bottom: 4rpx solid $han-primary-color;
            margin-bottom: 10rpx;
            border-radius: 3rpx;
        }
    }
}
</style>
